<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .bg-f2 {
            background-color: #f8f9fa;
        }

        video {
            width: 320px;
            height: auto;
        }

        .videoRow {
            margin-top: 30px;
        }

        #previewLabel {
            display: block;
            position: absolute;
        }
    </style>
    <title class="transcode">vp8<-->h264</title>
</head>

<body class="bg-f2">

<div class="container">

    <div class="my-3 p-3 bg-white rounded box-shadow small">

        <h6 class="border-bottom border-gray pb-2 mb-0 transcode">混流转码（支持vp8,h264互通)</h6>

        <div class="row" style="margin-top:1%">

            <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="audioList"><strong
                                class="text-gray-dark audioDevices">音频设备</strong></label>
                    </div>
                    <select class="custom-select" id="audioList" style="width: 50%">
                    </select>
                </div>
            </div>

            <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="videoList"><strong
                                class="text-gray-dark videoDevices">视频设备</strong></label>
                    </div>
                    <select class="custom-select" id="videoList" style="width: 60%">
                    </select>
                </div>
            </div>

            <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
                    </div>
                    <input type="email" class="form-control d-inline" id="roomId" style="width: 60%"
                           aria-describedby="emailHelp"
                           placeholder="请输入房间号">
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="videoCodec"><strong class="text-gray-dark videoCodeType">视频编码</strong></label>
                    </div>
                    <select class="custom-select" id="videoCodec" style="width: 60%">
                        <option value="">auto</option>
                        <option value="H264">H264</option>
                        <option value="VP8">VP8</option>
                    </select>
                </div>
            </div>
<!--            <div class="col-sm">-->
<!--                <div class="input-group input-group-sm mb-3">-->
<!--                    <div class="input-group-prepend">-->
<!--                        <label class="input-group-text" for="mixStreamBitrate"><strong-->
<!--                                class="text-gray-dark">混流码率</strong></label>-->
<!--                    </div>-->
<!--                    <input type="email" class="form-control d-inline" id="mixStreamBitrate" style="width: 60%"-->
<!--                           aria-describedby="emailHelp"-->
<!--                           placeholder="请输入混流码率">-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="row">
            <div class="col-sm">
                <button type="button" id="createRoom" class="btn btn-primary btn-sm enterRoomPush">进入房间（推流）</button>
                <button type="button" id="openRoom" class="btn btn-primary btn-sm enterRoomPlay">进入房间（不推流）</button>
                <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
            </div>
        </div>

        <div class="row videoRow">
            <div class="col-sm">
                <label id="previewLabel" class="text-white"></label>
                <video id="previewVideo" autoplay muted playsinline></video>
            </div>
            <div class="col-sm remoteVideo">
                <!--<video  autoplay muted playsinline></video>-->
            </div>
        </div>
    </div>
</div>

</body>
</html>
